<template>
    <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" class='aa'>
    <el-tab-pane label="待发货" name="2"></el-tab-pane>
    <el-tab-pane label="已发货" name="3"></el-tab-pane>
    <el-tab-pane label="已签收" name="4"></el-tab-pane>
    <el-tab-pane label="退货中" name="5"></el-tab-pane>
    <el-tab-pane label="退货成功" name="6"></el-tab-pane>
    <el-tab-pane label="退货失败" name="7"></el-tab-pane>
  </el-tabs>
        <div class="list">
            <div class="item" v-for="v in list">
                <div class="product" v-for='vv in v.list'>
                    <div class="left">
                        <img :src="vv.img" alt="">
                    </div>
                    <div class="right">
                        <div>{{vv.title}}</div>
                         <div style="margin:10px 0" >
                            <span class="shanchu">{{vv.price}}</span>
                    <span style="color:red" > 会员: {{vv.huiyuanPrice}}元</span>
                  
                </div>
                    <div >x {{vv.count}}</div>
                    </div>
                </div>
                <div class="bottom">
             总价:   {{v.price}}元 状态:{{v.status==2?'待发货':v.status==3?'已发货':v.status==4?'已签收':v.status==5?'退货中':v.status==6?'退货成功':'退货失败'}}
             <el-button v-if="v.status==3" type="text"  @click='qianshou(v.id)'>签收</el-button>
             <el-button v-if="v.status==3 || v.status==4" type="text"  @click='tuihuo(v.id)'>退货</el-button>
                </div>
            </div>
        </div>
        <div v-if='!list.length'>
        <img src='https://img1.baidu.com/it/u=2497499279,2812178571&fm=253&fmt=auto&app=138&f=PNG?w=400&h=300' style='width:100%'/>
        </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                activeName:'2',
                list:[],
                query: {
                    page:1,
                    size:99,
                    userId:this.$store.state.user.id,
                    status:2
                }
            }
        },
        mounted () {
            this.getList();
        },
        methods: {
        tuihuo(id){
              this.$prompt('请输入退货理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^.+$/,
          inputErrorMessage: '不能为空'
        }).then(({ value }) => {
            api.orderupdate({
                liyou:value,
                id,
                status:5
            }).then(res=>{
                if(res.code==200){
                        this.getList()
  this.$message({
            type: 'success',
            message: '操作成功'
          });
                }
            })
        
        })
        },
            handleClick(e){
                console.log(111111111,e.name);
                this.query.status=e.name
                  this.getList();
            },
            getList() {
                api.listOrder(this.query).then(res=>{
                    this.list=res.data.list
                    console.log(res);
                })
            },
            qianshou(id){
                api.orderchangeStatus({id,status:4}).then(res=>{
                       if(res.code==200){
              this.$message({
                                type: 'success',
                                message: '签收成功',
                            })
                     
                            this.getList()
        }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
 v-::deep .aa .el-tabs__item{
    font-size:22px !important;
}
.list{
    .item{
        padding: 20px ;
        margin-top: 20px;
        border: 1px solid #ddd;
        .bottom{
            padding: 10px 0;
        }
        .product{
            margin-top: 10px;
            display: flex;
            .left{
                img{
                    margin-right: 20px;
                    width: 100px;
                    height: 100px;
                }
            }
        }
    }
}
.shanchu{
      text-decoration: line-through;
}
</style>